<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09.ajax封装</title>
  </head>

  <body>

  </body>
  <script>
    function AJAX(options) {
      // 设置默认值
      let defaults = {
        type: "get",
        url: '',
        data: {

        },
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        success: function () {

        },
        error: function () {

        }
      };
      // 使用options对象中的属性覆盖defaults对象中的属性
      Object.assign(defaults, options);

      let xhr = new XMLHttpRequest();
      //1.处理参数的url
      let params = '';
      // 拼接url的get请求方式：参数名称=参数值&参数名称=参数值
      for (item in defaults.data) {
        params += item + "=" + defaults.data[item] + "&";
      };
      params = params.substring(0, params.length - 1);
      // console.log(params);
      // 2.判断ajax提交的方式
      if (defaults.type === "post") {
        xhr.open(defaults.type, defaults.url);
        // 设置请求报文
        let contentType = defaults.header['Content-Type'];
        console.log(contentType);
        xhr.setRequestHeader('Content-Type', contentType);
        if (contentType == "application/json") {
          //发送的是JSON格式的字符串
          xhr.send(JSON.stringify(defaults.data));
        } else {
          // 发送的是params的字符串
          xhr.send(params);
        }
      } else {
        xhr.open(defaults.type, defaults.url + "?" + params);
        xhr.send();
      }

      xhr.onload = function () {
        // 获取响应头的数据
        let contentType = xhr.getResponseHeader('Content-type');

        // 服务器返回的数据
        let responseText = xhr.responseText;
        // 如果响应数据中包含application/json
        if (contentType.includes('application/json')) {
          //将JSON字符串转换为JSON对象
          responseText = JSON.parse(responseText);
        }
        //ajax传输成功，将response返回给success函数
        if (xhr.status === 200) {
          defaults.success(responseText, xhr)
        } else {
          defaults.error(responseText, xhr)
        }
      }
    }


    /* 
    请求参数需要考虑的问题
    一.将请求参数传递到AJAX函数内部，根据请求方式的不同将请求参数放置在不同的位置
       1.1 get放在请求地址的后面
       1.2 post放在send方法中
    二.请求参数的格式问题
       2.1 application/x-www=form-urlencoded
          参数名称=参数值&参数名称=参数值
       2.2 application/json
          {name:"zhangsan",age:20} 
       2.3 考虑到对象转字符串更容易，所以data定为object         
    */


    AJAX({
      // 1.请求方式
      type: "get",
      // 2.请求地址
      url: "http://127.0.0.1:3000/ajaxGet",
      // 3.传递参数
      data: {
        name: "zhangsan",
        age: 18
      },
      // 4.设置请求格式的类型
      header: {
        // 'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Type': 'application/json'
      },
      // 5.成功调用时的函数
      success: function (data, xhr) {
        console.log("这是success函数" + data);
      },
      // 6.失败调用时的函数
      error: function (error, xhr) {
        console.log("这是error函数" + error);
        //返回xhr对象信息
        console.log(xhr);
      }
    })
  </script>

</html>